<script setup>
const featuredCharacters = [
  {
    id: 1,
    name: '漩涡鸣人',
    role: '第七代火影',
    image: 'https://via.placeholder.com/400x400?text=漩涡鸣人',
    description: '木叶隐村的第七代火影，拥有九尾的力量，从小立志成为火影保护村子。'
  },
  {
    id: 2,
    name: '宇智波佐助',
    role: '复仇者',
    image: 'https://via.placeholder.com/400x400?text=宇智波佐助',
    description: '宇智波一族的幸存者，为了复仇而离开村子，后来成为保护忍者世界的重要力量。'
  },
  {
    id: 3,
    name: '春野樱',
    role: '医疗忍者',
    image: 'https://via.placeholder.com/400x400?text=春野樱',
    description: '拥有强大医疗能力的忍者，纲手的弟子，后来成为木叶隐村的高层。'
  },
  {
    id: 4,
    name: '旗木卡卡西',
    role: '第六代火影',
    image: 'https://via.placeholder.com/400x400?text=旗木卡卡西',
    description: '拷贝忍者卡卡西，曾经是第七班的指导上忍，拥有写轮眼。'
  }
]

const featuredTeams = [
  {
    id: 1,
    name: '第七班',
    members: '鸣人、佐助、小樱、卡卡西',
    image: 'https://via.placeholder.com/600x300?text=第七班',
    description: '由卡卡西带领的木叶丸班，是故事的主要焦点。'
  },
  {
    id: 2,
    name: '晓组织',
    members: '佩恩、小南、鼬、鬼鲛等',
    image: 'https://via.placeholder.com/600x300?text=晓组织',
    description: '由10名S级叛忍组成的组织，旨在收集尾兽实现和平。'
  }
]

const popularEpisodes = [
  { id: 1, title: '鸣人回归！', episode: '第221话', description: '鸣人修行归来，与小樱重逢。' },
  { id: 2, title: '佩恩入侵', episode: '第387话', description: '佩恩六道进攻木叶村。' },
  { id: 3, title: '鸣人成为火影', episode: '第700话', description: '鸣人正式成为第七代火影。' }
]
</script>

<template>
  <div class="home-container">
    <!-- 英雄区域 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">火影忍者</h1>
        <p class="hero-subtitle">NARUTO -ナルト-</p>
        <p class="hero-description">
          这是一个关于忍者世界的传奇故事，讲述了漩涡鸣人从一个被嫌弃的九尾人柱力成长为拯救世界的英雄。
        </p>
        <div class="hero-buttons">
          <RouterLink to="/characters" class="btn-primary">
            探索角色
          </RouterLink>
          <RouterLink to="/episodes" class="btn-secondary">
            查看剧集
          </RouterLink>
        </div>
      </div>
      <div class="hero-background"></div>
    </section>

    <!-- 简介部分 -->
    <section class="about-section">
      <div class="container">
        <h2 class="section-title">关于火影忍者</h2>
        <div class="about-content">
          <p>
            《火影忍者》是日本漫画家岸本齐史的代表作，讲述了一个忍者世界中，从小失去父母的鸣人在成为火影的道路上不断努力成长的故事。
            作品描绘了鸣人与伙伴们的友情、成长、战斗和守护的精神，深受全球粉丝喜爱。
          </p>
          <p>
            故事发生在木叶隐村，这里是忍者世界的五大国之一火之国的忍者村。忍者们通过修炼查克拉来使用各种忍术，保护村子和国家的和平。
          </p>
        </div>
      </div>
    </section>

    <!-- 角色展示 -->
    <section class="characters-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">主要角色</h2>
          <RouterLink to="/characters" class="view-more">查看全部</RouterLink>
        </div>
        <div class="characters-grid">
          <div v-for="character in featuredCharacters" :key="character.id" class="character-card">
            <div class="character-image">
              <img :src="character.image" :alt="character.name" />
            </div>
            <div class="character-info">
              <h3 class="character-name">{{ character.name }}</h3>
              <p class="character-role">{{ character.role }}</p>
              <p class="character-description">{{ character.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 忍者队伍 -->
    <section class="teams-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">忍者队伍</h2>
          <RouterLink to="/teams" class="view-more">查看全部</RouterLink>
        </div>
        <div class="teams-grid">
          <div v-for="team in featuredTeams" :key="team.id" class="team-card">
            <div class="team-image">
              <img :src="team.image" :alt="team.name" />
            </div>
            <div class="team-info">
              <h3 class="team-name">{{ team.name }}</h3>
              <p class="team-members">{{ team.members }}</p>
              <p class="team-description">{{ team.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门剧集 -->
    <section class="episodes-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">热门剧集</h2>
          <RouterLink to="/episodes" class="view-more">查看全部</RouterLink>
        </div>
        <div class="episodes-list">
          <div v-for="episode in popularEpisodes" :key="episode.id" class="episode-item">
            <div class="episode-number">{{ episode.episode }}</div>
            <div class="episode-info">
              <h3 class="episode-title">{{ episode.title }}</h3>
              <p class="episode-description">{{ episode.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
:root {
  --naruto-orange: #ff6b00;
  --naruto-dark-orange: #d45a00;
  --naruto-blue: #0084ff;
  --naruto-dark-blue: #0066cc;
  --naruto-yellow: #ffd700;
  --naruto-black: #333333;
  --naruto-light-gray: #f5f5f5;
  --naruto-white: #ffffff;
}

.home-container {
  overflow-x: hidden;
}

/* 英雄区域 */
.hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--naruto-white);
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
              url('https://via.placeholder.com/1920x1080?text=NARUTO') center/cover no-repeat;
  z-index: -1;
}

.hero-content {
  text-align: center;
  max-width: 800px;
  padding: 2rem;
}

.hero-title {
  font-size: 4.5rem;
  font-weight: bold;
  margin: 0 0 1rem;
  color: var(--naruto-orange);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
}

.hero-subtitle {
  font-size: 1.8rem;
  margin: 0 0 2rem;
  color: var(--naruto-yellow);
  font-weight: 500;
}

.hero-description {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 0 3rem;
  max-width: 600px;
  margin: 0 auto 3rem;
}

.hero-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background-color: var(--naruto-orange);
  color: var(--naruto-white);
}

.btn-primary:hover {
  background-color: var(--naruto-dark-orange);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: var(--naruto-white);
  border: 2px solid var(--naruto-white);
}

.btn-secondary:hover {
  background-color: var(--naruto-white);
  color: var(--naruto-black);
  transform: translateY(-3px);
}

/* 通用容器和标题样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-title {
  font-size: 2.5rem;
  color: var(--naruto-black);
  text-align: center;
  margin: 0 0 1rem;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: var(--naruto-orange);
  border-radius: 2px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.view-more {
  color: var(--naruto-orange);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease;
}

.view-more:hover {
  color: var(--naruto-dark-orange);
}

/* 关于部分 */
.about-section {
  background-color: var(--naruto-white);
  padding: 5rem 0;
}

.about-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.about-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--naruto-black);
  margin-bottom: 1.5rem;
}

/* 角色部分 */
.characters-section {
  background-color: var(--naruto-light-gray);
  padding: 5rem 0;
}

.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.character-card {
  background-color: var(--naruto-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.character-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.character-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.character-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.character-card:hover .character-image img {
  transform: scale(1.05);
}

.character-info {
  padding: 1.5rem;
}

.character-name {
  font-size: 1.5rem;
  color: var(--naruto-orange);
  margin: 0 0 0.5rem;
}

.character-role {
  font-size: 1rem;
  color: var(--naruto-blue);
  margin: 0 0 1rem;
  font-weight: 500;
}

.character-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--naruto-black);
  margin: 0;
}

/* 队伍部分 */
.teams-section {
  background-color: var(--naruto-white);
  padding: 5rem 0;
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.team-card {
  background-color: var(--naruto-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.team-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-card:hover .team-image img {
  transform: scale(1.05);
}

.team-info {
  padding: 1.5rem;
  flex: 1;
}

.team-name {
  font-size: 1.5rem;
  color: var(--naruto-orange);
  margin: 0 0 0.5rem;
}

.team-members {
  font-size: 1rem;
  color: var(--naruto-blue);
  margin: 0 0 1rem;
  font-weight: 500;
}

.team-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--naruto-black);
  margin: 0;
}

/* 剧集部分 */
.episodes-section {
  background-color: var(--naruto-light-gray);
  padding: 5rem 0;
}

.episodes-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.episode-item {
  background-color: var(--naruto-white);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.episode-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.episode-number {
  background-color: var(--naruto-orange);
  color: var(--naruto-white);
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0.8rem 1.2rem;
  border-radius: 50%;
  min-width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.episode-info {
  flex: 1;
}

.episode-title {
  font-size: 1.3rem;
  color: var(--naruto-black);
  margin: 0 0 0.5rem;
}

.episode-description {
  font-size: 0.95rem;
  color: var(--naruto-black);
  margin: 0;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .teams-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-subtitle {
    font-size: 1.5rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .characters-grid {
    grid-template-columns: 1fr;
  }
  
  .teams-grid {
    grid-template-columns: 1fr;
  }
  
  .episode-item {
    flex-direction: column;
    text-align: center;
  }
  
  .section-header {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
    text-align: center;
  }
}</style>
